/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-11-28 Time: 21:58
 *
 * 提示性弹出框
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity, Modal, SafeAreaView, ScrollView,
} from 'react-native';
import PropTypes from 'prop-types';
import {FONT_COLOR_TITLE} from "../../constant/PHColors"
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../../constant/PHScreen";
import {orderEventGetinfo} from "./Action";
import {getStore} from "../../configuration/StoreConfiguration";
import {NavigationActions} from "react-navigation";

export default class JPushModal extends Component {

    static propTypes = {
        JPushText: PropTypes.string,
        JPushModalVisiable:PropTypes.bool,
        CloseJPushModal:PropTypes.func,
        SubmitJPushModal:PropTypes.func,
        WebSocketData: PropTypes.array,
    }

    render(): React.ReactNode {
        return (
            <Modal visible={this.props.JPushModalVisiable} animationType = {'none'} transparent = {true} onRequestClose={()=> this.props.CloseJPushModal()} >
                <View style={{flex: 1}} activeOpacity={1}  onPress={()=>{
                    // this.props.CloseJPushModal()
                }}>
                    <View style={styles.JPushContainer} >
                        <View style={styles.JPushBody}>
                            <View style={styles.JPushHeader}>
                                <Text style={styles.JPushHeaderText}>
                                    您有{this.props.WebSocketData.length}条新任务
                                </Text>
                            </View>
                            <ScrollView style={styles.JPushCenter}>
                                {
                                    this.props.WebSocketData.map((item, index) => {
                                        return (
                                            this.renderWebSocketData(item, index)
                                        );
                                    })
                                }
                            </ScrollView>
                            <View style={styles.JPushBottom}>
                                <TouchableOpacity  style={styles.JPushBottomLeft} onPress={()=>{
                                    this.props.CloseJPushModal()
                                }}>
                                    <Text style={{color:'black',fontSize:20}}>
                                        取消
                                    </Text>
                                </TouchableOpacity>
                                <TouchableOpacity style={styles.JPushBottomRight} onPress={()=>{
                                    this.props.SubmitJPushModal()
                                }}>
                                    <Text style={{color:'white',fontSize:20}}>
                                        查看
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </View>
            </Modal>
        )
    }

    renderWebSocketData=(item, index)=>{
        return (
            <View key={index} style={styles.JPushCenterView}>

                <View style={styles.JPushCenterView_left}>
                    <Text style={styles.JPushCenterText_left}>
                        {item.ordertype}:
                    </Text>
                </View>
                <View style={styles.JPushCenterView_right}>
                    <Text style={styles.JPushCenterText_right} >
                        {item.place ? (item.place.length > 17 ? item.place.substr(0, 17) + "..." : item.place) : ""}
                    </Text>
                </View>

            </View>
        )
    }
}

const styles = StyleSheet.create({

    JPushContainer:{
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)'
    },

    JPushBody:{
        top:(SCREEN_HEIGHT-200)/2,
        left:40,
        width:SCREEN_WIDTH - 80,
        backgroundColor:'white',
        borderRadius:3,
    },

    JPushHeaderText: {
        fontSize: 22,
        color: '#2f67ff'
    },

    JPushHeader: {
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: 2,
        borderColor:'#2f67ff',
    },

    JPushCenter:{
        minHeight: 50,
        height:150,
        flexDirection:'column',
    },

    JPushCenterView:{
        flexDirection: 'row',
        alignItems: 'center',
    },

    JPushCenterView_left:{
        flex:0.35,
        height: 40,
        justifyContent: 'center',
        alignItems: 'flex-end',
    },

    JPushCenterView_right:{
        flex:0.65,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
    },

    JPushCenterText_left:{
        fontSize: 16,
        color: FONT_COLOR_TITLE,
    },

    JPushCenterText_right:{
        fontSize: 20,
        color: FONT_COLOR_TITLE,
    },

    JPushBottom:{
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection:'row'
    },

    JPushBottomLeft:{
        flex:1,
        height: 44,
        margin: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#cecece'
    },

    JPushBottomRight:{
        flex:1,
        height: 44,
        margin: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#2f67ff'
    },

});